import type { GetServerSideProps, NextPage } from 'next'
import Head from 'next/head'

import styles from '../../styles/Goods.module.scss'
import { useEffect, useState } from 'react'
import { Image, message, PageHeader, Descriptions, Badge, Space, Divider, Tag, Table, Tabs, Button, Popconfirm, Rate } from 'antd';
import router from 'next/router'
import { AdminService, RemarkService } from '../../services'
import { nowDay } from '../../libs/utils'
import { Remark } from '../../models/types'
import Link from 'next/link';

interface Props {
  detail: AdminService.Detail
  remarkList: Remark[]
  total: number
}

const { Column } = Table
const { TabPane } = Tabs;
const pageSize = 10

export const getServerSideProps: GetServerSideProps = async ctx => {
  const detail = await AdminService.detail(ctx.query.id as string, ctx.req.cookies.token)
  const remarkRes = await RemarkService.list(detail.data.book._id, 0, pageSize, false)
  return {
    props: {
      detail,
      remarkList: remarkRes.data.list,
      total: remarkRes.data.total
    }
  }
}

const Goods: NextPage<Props> = ({ detail, remarkList, total }) => {

  const { user, book } = detail.data

  const [remarks, setRemarks] = useState(remarkList)
  const [remtotal, setToal] = useState<number>(total)
  const [pageIndex, setPageIndex] = useState<number>(1)
  const [tabStat, setTab] = useState<boolean>(false)

  async function getdata(skip: number, flag: boolean) {
    const res = await RemarkService.list(book._id, skip, pageSize, flag)
    if (res.stat === 'OK') {
      setRemarks(res.data.list)
      setToal(res.data.total)
    } else {
      message.error(res.msg)
    }
  }


  return (
    <div className='page'>
      <Head>
        <title>书籍详情-管理端</title>
      </Head>
      <div className={styles.wrap}>
        <PageHeader
          onBack={() => router.back()}
          title="书籍详情页"
        />
        <main className={styles.content}>
          <Descriptions title="发布人信息" bordered>
            <Descriptions.Item label="头像"><Image alt='' width={100} src={user.avatar} /></Descriptions.Item>
            <Descriptions.Item label="用户名:">{user.nickname}</Descriptions.Item>
            <Descriptions.Item label="民大币">￥{user.mdb.toFixed(2)}</Descriptions.Item>
            <Descriptions.Item label="身份">{user.role}</Descriptions.Item>
            <Descriptions.Item label="注册时间">
              {nowDay(user.registerTime)}
            </Descriptions.Item>
            <Descriptions.Item label="联系方式">
              {user.qqnumber}
            </Descriptions.Item>
            <Descriptions.Item label="专业" span={3}>
              <Badge status="processing" text={user.major} />
            </Descriptions.Item>
            <Descriptions.Item label="签名" span={3}>{user.signature}</Descriptions.Item>
          </Descriptions>
          <Divider />
          <Descriptions title="书籍信息" bordered>
            <Descriptions.Item label="审核状态:" >{
              book.judger ? <Tag color="success">已审核</Tag> : <Tag color='warning'>未审核</Tag>
            }</Descriptions.Item>
            <Descriptions.Item label="审核人:" >{book.judger}</Descriptions.Item>
            <Descriptions.Item label="审核内容:" >{book.judgeCon}</Descriptions.Item>
            <Descriptions.Item label="封面" span={3}>
              <Space >{book.banner.map(v => <Image key={v} alt='' width={100} src={v} />)}</Space>
            </Descriptions.Item>
            <Descriptions.Item label="标题名:" span={3}>{book.title}</Descriptions.Item>
            <Descriptions.Item label="简介:" span={3}>{book.content}</Descriptions.Item>
            <Descriptions.Item label="最低价:">￥{book.lowprice}</Descriptions.Item>
            <Descriptions.Item label="总库存">{book.allstock}</Descriptions.Item>
            <Descriptions.Item label="更新时间">
              {nowDay(book.updateAt)}
            </Descriptions.Item>
            <Descriptions.Item label="专业" span={3}>
              <Badge status="processing" text={book.major} />
            </Descriptions.Item>
            <Descriptions.Item label="书籍目录" span={3}>
              {
                book.books.map((item, i) => <Descriptions bordered key={i}>
                  <Descriptions.Item label={'书名' + (i + 1)}>{item.bookname}</Descriptions.Item>
                  <Descriptions.Item label="定价">{item.price}</Descriptions.Item>
                  <Descriptions.Item label="库存">{item.stock}</Descriptions.Item>
                </Descriptions>)
              }
            </Descriptions.Item>
          </Descriptions>
          <Divider />
          <Descriptions title="评论列表" />
          <Tabs defaultActiveKey="false" onChange={async (e) => {
            if (e === 'true') {
              setTab(true)
              await getdata((pageIndex - 1) * 10, true)
            }
            else {
              setTab(false)
              await getdata((pageIndex - 1) * 10, false)
            }
          }}>
            <TabPane tab="留言" key='false' />
            <TabPane tab="评论" key='true' />
          </Tabs>
          <Table
            dataSource={remarks}
            rowKey="_id"
            pagination={{
              pageSize: pageSize,
              current: pageIndex,
              total: remtotal,
              showSizeChanger: false,
              onChange: async (v) => {
                setPageIndex(v)
                getdata((v - 1) * 10, tabStat)
              }
            }}
          >
            {
              tabStat && <Column title="评分" dataIndex="rate" key="_id"
                width={200}
                render={(rate: number) => <Rate disabled defaultValue={rate} />}
              />
            }
            <Column title="内容" dataIndex="content" key="_id" />
            <Column title="状态" dataIndex="isDelete" key="_id"
              render={v => {
                return v ? <Tag color="warning">删除</Tag> : <Tag color='success'>正常</Tag>
              }}
            />
            <Column title="类型" dataIndex="rate" key="_id"
              render={v => {
                return v === 0 ? <Tag color='orange'>留言</Tag> : <Tag color='red'>评价</Tag>
              }}
            />
            <Column title="发送时间" dataIndex="createAt" key="_id"
              render={v => {
                return nowDay(v as number)
              }}
            />
            <Column
              title="操作"
              key="_id"
              render={(text, record: Remark) => {
                return (
                  <Popconfirm title={`确认${record.isDelete ? '恢复' : '删除'}吗？`} okText="确认" cancelText="取消"
                    onConfirm={async () => {
                      const res = await AdminService.dealremark(record._id, !record.isDelete)
                      if (res.stat === 'OK') {
                        message.success('处理成功')
                        getdata((pageIndex - 1) * 10, tabStat)
                      } else {
                        message.error(res.msg)
                      }
                    }}
                  >
                    <Button
                      size='small'
                      type='default'
                      danger={!record.isDelete}
                    >{record.isDelete ? '恢复' : '删除'}</Button>
                  </Popconfirm>
                )
              }}
            />
          </Table>
        </main>
      </div>
    </div>
  )
}

export default Goods
